<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" :disabled="pageDisabled" label-width="80px">
      <el-form-item label="编号" prop="code" disabled v-if="form.code != null">
        {{form.code}}
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称" />
      </el-form-item>

      <el-form-item label="总金额" prop="totalAmount">
        <el-input-number v-model="form.totalAmount" :precision="2" :step="1" :min="0" :max="100000" placeholder="请输入总金额"></el-input-number>
      </el-form-item>


      <!-- <el-form-item label="xx部门" prop="deptId">
        <vueTreeselect
         v-model="form.deptId" :options="deptOptions"
         :show-count="true" placeholder="请选择xx部门"
          :multiple="true"
          :clearable="true"
          :searchable="true"
           :open-on-focus="true"
           :branchNodesFirst="true"
         />

      </el-form-item> -->

   <!-- <el-tree :data="deptOptions"
    show-checkbox
    default-expand-all node-key="id"
    ref="tree" highlight-current
    :props=" {  id :'id' ,label: 'label', children: 'children',}">
    </el-tree> -->



      <el-form-item label="发生部门" prop="findDeptId">
        <!-- :show-all-levels="false"  显示全路径    separator="-"  分隔符  -->
        <!-- [props]  multiple : true,  多选  
					 checkStrictly:true,   选择任意级别
					 emitPath :false , 不是数组   
					
		-->
        <el-cascader v-model="form.findDeptId"
          :options="deptOptions"
          :props="{ expandTrigger: 'hover' ,  value: 'id'   ,emitPath:false ,  }"
          clearable filterable placeholder="请选择部门">
          <template slot-scope="{ node, data }">
            <span>{{ data.label }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>

      <el-form-item label="关联部门" prop="deptIds">
        <el-cascader v-model="form.deptIds"
         separator="-" :options="deptOptions"
        :props="{ expandTrigger: 'hover' ,  multiple : true,   value: 'id'  ,emitPath:false , }"
          clearable filterable placeholder="请选择部门">
          <template slot-scope="{ node, data }">
            <span>{{ data.label }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>


<!-- :props="{  key: 'key1',  label: 'label1'   disabled :'disabled'}" -->

    <el-form-item label="相关区域" prop="areaIds">
      <el-transfer v-model="form.areaIds" :data="mapData" :filter-method="filterMethod" filter-placeholder="请输入城市拼音"
        filterable>
      </el-transfer>
    </el-form-item>




      <el-form-item label="发生时间" prop="findTime">
        <el-date-picker clearable size="small" style="width: 200px" v-model="form.findTime" type="date" value-format="yyyy-MM-dd"
          :picker-options="pickerOptions" placeholder="选择发生时间">
        </el-date-picker>
      </el-form-item>



      <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item label="类别" prop="type">
        <el-select v-model="form.type" placeholder="请选择类别">
          <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
        </el-select>
      </el-form-item>






      <el-form-item label="颜色选择" prop="colorType">
        <el-color-picker v-model="form.colorType" show-alpha :predefine="predefineColors"></el-color-picker>

      </el-form-item>


      <el-form-item label="评分" prop="rateType">

        <el-rate v-model="form.rateType" :max="5" :texts="['极差1', '失望2', '一般3', '满意4', '惊喜5']" show-text>
        </el-rate>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
      </el-form-item>


    </el-form>


    <div slot="footer" v-if="!pageDisabled" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>

    </div>


  </div>

</template>

<script>
  import {
    getLossevent,
    addLossevent,
    updateLossevent
  } from "@/api/grc/lossevent";


  import Editor from '@/components/Editor';
 import vueTreeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {
    treeselect
  } from "@/api/system/dept";
  export default {
    name: "LosseventDetailBase",
    components: {
      Editor,vueTreeselect
    },

    props: {
      detailDialog: {
        type: Object,
        default: function() {
          return {
            // id
            id: null,
            open: null,
            // 是否详情页
            isDisabled: null,
          }
        },
      },
    },

    data() {
      return {
        // 表单参数
        form: {},



        // 状态字典
        statusOptions: [],
        // 类别字典
        typeOptions: [],

        // 部门树选项
        deptOptions: undefined,

        // 时间控制
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        //颜色选择
        predefineColors: [
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgba(255, 69, 0, 0.68)',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsva(120, 40, 94, 0.5)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%, 0.73)',
          '#c7158577'
        ],
        //穿梭数据
        mapData: [],

        // 表单校验
        rules: {}
      };
    },

    created() {
      this.initDicts();
      this.initDate();

    },
    computed: {
      pageDisabled: function() {
        return this.detailDialog.isDisabled;
      },


    },
    watch: {
      /* 监听打开状态 */
      "detailDialog.open": function(newOpen, oldOpen) {
        //显示则刷新
        if (newOpen) {
          console.log(this.$options.name + "监听打开状态", this.detailDialog.id)
          this.initDate();
        }
      },
    },
    methods: {
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },
      generateData() {
        const data = [];
        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
        cities.forEach((city, index) => {
          data.push({
            key: index,
            label: city,
            pinyin: pinyin[index]
          });
        });
        this.mapData = data;
      },

      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });


      },

      /* 初始化form */
      initDate() {
        if (this.detailDialog.id) {
           getLossevent(this.detailDialog.id).then(response => {
            this.form = response.data;
          });
        } else {
          //新增页面清空
          this.form = {};
        }
      },
      /* 加载码表 */
      initDicts() {
        this.generateData();
        this.getTreeselect();
        this.getDicts("T21_flow_status").then(response => {
          this.statusOptions = response.data;
        });
        this.getDicts("t21_ldc_lossevent_type").then(response => {
          this.typeOptions = response.data;
        });


      },

      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateLossevent(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.parentRefresh();
              });
            } else {
              addLossevent(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.parentRefresh();
              });
            }
          }
        });
      },
      /* 关闭子页面*/
      cancel() {

        this.detailDialog.open = !this.detailDialog.open
        this.$emit("update:detailDialog", this.detailDialog);
      },

      /* 关闭子页面刷新父页面 */
      parentRefresh() {
        this.cancel();
        this.$emit("doRefresh");
      },



    },

  }
</script>

<style>
</style>
